<template>
	<view class="home">
		<!-- 顶部 -->
		<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
			<view class="left" :style="'top:' + demo.top + 'px'">
				<u-icon name="zuobiaofill" custom-prefix="custom-icon" size="30" color="#888888" />
				<text class="ml-2">海口</text>
			</view>
		</view>
	   <!-- tabs选项卡 -->
		<view class="tabs mb-1">
			<scroll-view scroll-x="true" class="scrollz" style="width: 90%;">
				<view class="tablist">
					<block v-for="(tab, index) in 5" :key="index"><view :class="['item', { checked: checked == index }]">你好</view></block>
				</view>
				<!-- <view></view> -->
			</scroll-view>
			<view class="icon"><u-icon name="search" size="28"></u-icon></view>
		</view>
		 <view class="selectClass ">
		 	<block v-for="(item,index) in 5">
				<view class="selectClass_item">
					小吃
				</view>
			</block>
		 </view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			checked: 1,
			demo: {
				top: 0,
				height: 0
			}
		};
	},
	computed: {},
	methods: {},
	created() {
		const demo = uni.getMenuButtonBoundingClientRect();
		console.log('demo: ', demo);
		this.demo.top = demo.top;
		this.demo.height = demo.height;
	},
	onLoad() {}
};
</script>

<style lang="scss">
	page {
	  width: 100%;
	  height: 100%;
	  background-color:#f2f3f8;
	}
.selectClass{
	width: 95%;
	height: 80rpx;
	margin: 0 auto;
	border-radius: 30rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #FFFFFF;
	.selectClass_item{
		font-size: 20rpx;
		white-space: nowrap;
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		background-color: #f0f0f0;
	}
}
.demo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	font-size: 26rpx;
	.left {
		float: left;
		position: absolute;
		width: max-content;
		height: max-content;
		top: 0;
		bottom: 0;
		left: 20rpx;
		margin: auto;
		.iconfont {
			color: #3c3c3c;
		}
	}
}
.tablist {
	display: flex;
}
.tabs {
	width: 100%;
	background-color: #f2f3f8;
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	.icon {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		// flex: 1;
		// padding: 10rpx;
		border-radius: 50%;
		background-color: #ffffff;
	}
}
.scrollz {
	.tablist {
		display: flex;
	}
	.item {
		white-space: nowrap;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		// flex: 1;
		margin-left: 20rpx;
	}
	.checked {
		background-color: #676384;
		color: #ffffff;
	}
}
</style>
